import 'package:flutter/material.dart';

class CustomDialogPage extends StatefulWidget {
  @override
  _CustomDialogPageState createState() => _CustomDialogPageState();
}

class _CustomDialogPageState extends State<CustomDialogPage> {
  String _returnValue = '显示点击选择结果';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              RaisedButton(
                colorBrightness: Brightness.dark,
                onPressed: () {
                  _showCustomDialog(context).then((val) {
                    setState(() {
                      _returnValue = val;
                    });
                  });
                },
                child: Text('自定义Dialog弹窗'),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20.0),
                child: Text(
                  _returnValue,
                  style: TextStyle(fontSize: 20),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  final TextStyle _dialogTextStyle =
      TextStyle(color: Colors.white, fontSize: 20, fontFamily: 'OpenSans');

  ///单个点击按钮
  Widget _simpleDialogCustomOption({
    BuildContext context,
    ColorSwatch color = Colors.blue,
    BorderRadius borderRadius = const BorderRadius.all(Radius.circular(0)),
    @required String text,
    @required VoidCallback onPressed,
  }) {
    return Container(
      height: 50,
      //为了保持点击效果这边使用RaisedButton
      child: RaisedButton(
        color: color,
        highlightColor: color[700],
        splashColor: Colors.grey,
        shape: RoundedRectangleBorder(borderRadius: borderRadius),
        child: Text(
          text,
          style: _dialogTextStyle,
        ),
        onPressed: onPressed,
      ),
    );
  }

  Future<String> _showCustomDialog(BuildContext context) async {
    var result = await showDialog(
      context: context,
      builder: (context) {
        return SimpleDialog(
          //如果在顶层MaterialApp中没有设置Button的默认主题，这里可以通过设置SimpleDialog的shape控制弹窗形状
//          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
          contentPadding: EdgeInsets.all(0),
          backgroundColor: Colors.transparent,
          children: <Widget>[
            _simpleDialogCustomOption(
              color: Colors.blue,
              text: '自定义弹窗1',
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10.0),
                topRight: Radius.circular(10.0),
              ),
              onPressed: () {
                Navigator.pop(context, '自定义弹窗1');
              },
            ),
            _simpleDialogCustomOption(
              color: Colors.green,
              text: '自定义弹窗2',
              onPressed: () {
                Navigator.pop(context, '自定义弹窗2');
              },
            ),
            _simpleDialogCustomOption(
              color: Colors.blue,
              text: '自定义弹窗3',
              onPressed: () {
                Navigator.pop(context, '自定义弹窗3');
              },
            ),
            _simpleDialogCustomOption(
              color: Colors.orange,
              text: '自定义弹窗4',
              onPressed: () {
                Navigator.pop(context, '自定义弹窗4');
              },
            ),
            _simpleDialogCustomOption(
              color: Colors.brown,
              text: '自定义弹窗5',
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(10.0),
                bottomRight: Radius.circular(10.0),
              ),
              onPressed: () {
                Navigator.pop(context, '自定义弹窗5');
              },
            ),
          ],
        );
      },
    );
    return result == null ? '未选择按钮' : result;
  }
}
